<template>
	<view class="container">
		<!-- 支出分类 -->
		<view class="category-section">
			<view class="section-header">
				<text class="section-title">支出分类</text>
				<text class="add-btn" @click="addCategory('expense')">+ 添加</text>
			</view>
			<view class="category-list">
				<view v-for="(category, index) in expenseCategories" :key="index" class="category-item">
					<view class="category-left">
						<view class="category-icon" :style="{ backgroundColor: category.color }">
							<text class="category-text">{{ category.icon }}</text>
						</view>
						<text class="category-name">{{ category.name }}</text>
					</view>
					<view class="category-actions">
						<text class="action-btn edit-btn" @click="editCategory('expense', index)">编辑</text>
						<text class="action-btn delete-btn" @click="deleteCategory('expense', index)">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收入分类 -->
		<view class="category-section">
			<view class="section-header">
				<text class="section-title">收入分类</text>
				<text class="add-btn" @click="addCategory('income')">+ 添加</text>
			</view>
			<view class="category-list">
				<view v-for="(category, index) in incomeCategories" :key="index" class="category-item">
					<view class="category-left">
						<view class="category-icon" :style="{ backgroundColor: category.color }">
							<text class="category-text">{{ category.icon }}</text>
						</view>
						<text class="category-name">{{ category.name }}</text>
					</view>
					<view class="category-actions">
						<text class="action-btn edit-btn" @click="editCategory('income', index)">编辑</text>
						<text class="action-btn delete-btn" @click="deleteCategory('income', index)">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			categories: {
				expense: [],
				income: []
			}
		}
	},
	computed: {
		expenseCategories() {
			return this.categories.expense || []
		},
		incomeCategories() {
			return this.categories.income || []
		}
	},
	onLoad() {
		// 检查登录状态
		if (!this.checkAuth()) return
		this.loadCategories()
	},
	methods: {
		loadCategories() {
			this.categories = uni.getStorageSync('accounting_categories') || {
				expense: [
					{ name: '餐饮', icon: '🍽️', color: '#FF6B6B' },
					{ name: '交通', icon: '🚗', color: '#4ECDC4' },
					{ name: '购物', icon: '🛒', color: '#45B7D1' },
					{ name: '娱乐', icon: '🎮', color: '#96CEB4' },
					{ name: '医疗', icon: '💊', color: '#FFEAA7' },
					{ name: '教育', icon: '📚', color: '#DDA0DD' },
					{ name: '住房', icon: '🏠', color: '#98D8C8' },
					{ name: '其他', icon: '📝', color: '#F7DC6F' }
				],
				income: [
					{ name: '工资', icon: '💰', color: '#4CAF50' },
					{ name: '奖金', icon: '🎁', color: '#FF9800' },
					{ name: '投资', icon: '📈', color: '#2196F3' },
					{ name: '兼职', icon: '💼', color: '#9C27B0' },
					{ name: '其他', icon: '📝', color: '#607D8B' }
				]
			}
		},
		addCategory(type) {
			uni.showModal({
				title: '添加分类',
				content: '请输入分类名称',
				editable: true,
				placeholderText: '分类名称',
				success: (res) => {
					if (res.confirm && res.content) {
						const newCategory = {
							name: res.content,
							icon: '📝',
							color: this.getRandomColor()
						}
						this.categories[type].push(newCategory)
						this.saveCategories()
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
					}
				}
			})
		},
		editCategory(type, index) {
			const category = this.categories[type][index]
			uni.showModal({
				title: '编辑分类',
				content: category.name,
				editable: true,
				success: (res) => {
					if (res.confirm && res.content) {
						this.categories[type][index].name = res.content
						this.saveCategories()
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
					}
				}
			})
		},
		deleteCategory(type, index) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个分类吗？',
				success: (res) => {
					if (res.confirm) {
						this.categories[type].splice(index, 1)
						this.saveCategories()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},
		saveCategories() {
			uni.setStorageSync('accounting_categories', this.categories)
		},
		getRandomColor() {
			const colors = [
				'#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
				'#DDA0DD', '#98D8C8', '#F7DC6F', '#4CAF50', '#FF9800',
				'#2196F3', '#9C27B0', '#607D8B', '#795548', '#9E9E9E'
			]
			return colors[Math.floor(Math.random() * colors.length)]
		},
		checkAuth() {
			const currentUser = uni.getStorageSync('currentUser')
			if (!currentUser) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.category-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.add-btn {
	font-size: 28rpx;
	color: #667eea;
}

.category-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-radius: 15rpx;
	background: #f8f9fa;
}

.category-left {
	display: flex;
	align-items: center;
}

.category-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.category-text {
	font-size: 30rpx;
}

.category-name {
	font-size: 28rpx;
	color: #333;
}

.category-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}

.edit-btn {
	background: #e3f2fd;
	color: #2196F3;
}

.delete-btn {
	background: #ffebee;
	color: #F44336;
}
</style>
